<template>
  <div class="login-index">
    <transition name="sss" mode="out-in">
      <component :is="status" :key="status" :formType.sync="status"></component>
    </transition>
  </div>
</template>

<script>
import LoginForm from "./components/LoginForm.vue";
import SigninForm from "./components/SignInForm.vue";
import Logout from "./components/logout.vue";
import { mapGetters } from 'vuex';

export default {
  components: {
    LoginForm,
    SigninForm,
    Logout
  },
  computed: {
    
    
  },
  data() {
    return {
      status: 'LoginForm',
    };
  },
  methods: {
    ...mapGetters('user', {
      isLogin: 'isLogin'
    }),
    hasLogin() {
      console.log(this.isLogin());
      let component = this.isLogin() ? 'Logout' : 'LoginForm'
      return this.status = component
    }
  },
  created() {
    this.hasLogin()
  }
};
</script>

<style lang="less" scoped>
@import "./components/login.css";
.login-index {
  width: 600px;
  height: auto;
  margin: 0 auto;
}

.sss-enter-active {
  animation: mmm 0.5s;
}
.sss-leave-active {
  animation: mmm 0.5s reverse;
}
@keyframes mmm {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
</style>